<script setup>

  import {onMounted, ref} from "vue";
  import {confirmMessage, showMessage} from "../../util/message.js";
  import {doDelete, doDownload, doGet, doPost} from "../../util/request.js";
  import {useRouter} from "vue-router";
  import FileSaver from 'file-saver';
  // 创建路由对象
  const router = useRouter()
  // 创建线索信息对象
  const list = ref([])
  // 创建分页对象
  const pageInfo = ref({})

  // 加载线索列表
  const loadData = (current) => {
  doGet('/api/customer/page', {current: current})
      .then(resp => {
        if (resp.data.code === 200) {
          list.value = resp.data.data.list;
          pageInfo.value.total = resp.data.data.total;
        } else {
          showMessage('查询失败，原因：' + resp.data.message, 'error')
        }
      })
}

  onMounted(()=>{
  loadData(1)
})

  // 跳转至编辑页面
  const toEdit = (id) => {
  router.push('/dashboard/clue/edit/' + id)
}

  // 创建导入弹出层控制标识
  const importDialogVisible = ref(false)
  const uploadRef = ref({})
  // 提交导入请求
  const submitExcel = () => {
  uploadRef.value.submit()
}

  const uploadExcel = (options) => {
  alert(options.action)
  let formData = new FormData()
  formData.append('file',options.file)
  doPost(options.action,formData).then(resp => {
  if (resp.data.code === 200) {
  showMessage('导入成功', 'success');
  importDialogVisible.value = false;
  loadData(1);
} else {
  showMessage('导入失败，原因：' + resp.data.message, 'error')
}
})
}
  //单个删除线索
  const toDel = (id) => {
  confirmMessage('您确认要删除吗？')
  doDelete('/api/clue/'+id,{}).then(resp => {
  if (resp.data.code === 200) {
  showMessage("删除线索成功", 'success')
  loadData(1)
} else {
  showMessage("删除线索失败，原因："+resp.data.msg,'error')
}
})
}
  let idArr = []
  // 处理选中事件函数
  const handleSelectionChange = (newSelection) => {
  idArr = []
  newSelection.forEach(item=>{
  idArr.push(item.id)
})
  console.log(idArr)
}

  // 批量删除用户
  const toBatchDel = () => {
  // 判断用户是否选择了数据
  if (idArr.length <= 0) {
  showMessage('请选择要删除的数据!','warning')
  return
}
  confirmMessage('您确定要批量删除吗？')
  .then(()=>{
  console.log("要删除的数据----- "+idArr)
  // 发送删除的请求
  doDelete('/api/clue/batch/'+idArr,{}).then(resp=>{
  if (resp.data.code === 200) {
  showMessage('删除成功！', 'success');
  // 刷新局部页面
  loadData(1)
} else {
  showMessage('删除失败，原因：'+resp.data.msg,'error')
}
})
})
}

  //跳转至详情页面
  const toDetail = (id) => {
  router.push('/dashboard/clue/detail/' + id)
}
//导出所有数据到Excel
  const exportAllExcel = () => {
    doDownload('/api/download/excel/customer',{})
        .then(resp=>{
          if (resp.status === 200) {
            //创建一个 Blob对象
            const blob = new Blob([resp.data], {type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'});
            //使用FileSaver保存文件
            FileSaver.saveAs(blob, 'download_file.xlsx');
          }else {
            showMessage('导出失败，原因：'+resp.data.msg,'error')
          }
        })
  }
</script>

<template>

    <el-button type="success" @click="exportAllExcel">导出客户(Excel)</el-button>
    <el-button type="danger" @click="toBatchDel">批量删除</el-button>
    <div>&nbsp;</div>

    <el-table
        :data="list"
        row-key="id"
        style="width: 100%"
        @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" :selectable="selectable" width="55"/>
      <el-table-column label="序号" type="index" width="80"/>
      <el-table-column label="负责人" property="ownerName" width="100"/>
      <el-table-column label="所属活动" property="activityName" width="150"/>
      <el-table-column label="客户姓名" width="80" property="fullName"/>
      <el-table-column label="称呼" width="80" property="appellationName"/>
      <el-table-column label="手机" width="120" property="phone"/>
      <el-table-column label="微信" width="120" property="weixin"/>
      <el-table-column label="是否贷款" width="80" property="needLoanName"/>
      <el-table-column label="意向状态" width="80" property="intentionStateName"/>
      <el-table-column label="意向产品" width="120" property="intentionProductName"/>
      <el-table-column label="线索来源" width="80" property="sourceName"/>
      <el-table-column label="下次联系时间" width="200" property="nextContactTime"/>
      <el-table-column label="操作">
        <template #default="scope">
          <el-button type="primary" size="small" @click="toDetail(scope.row.id)">
            详情
          </el-button>
          <el-button type="success" size="small" @click="toEdit(scope.row.id)">
            编辑
          </el-button>
          <el-button size="small" type="danger" @click="toDel(scope.row.id)">
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <div>&nbsp;</div>

    <el-pagination
        background layout="prev, pager, next"
        :total=pageInfo.total
        @change="loadData"/>

    <!--  导入Excel弹出层-->
    <el-dialog
        v-model="importDialogVisible"
        title="导入线索Excel"
        width="800"
        :close-on-click-modal=false
        :show-close=false
        align-center>

      <el-upload
          ref="uploadRef"
          method="post"
          action="/api/clue/import"
          :http-request="uploadExcel"
          :auto-upload="false">
        <template #trigger>
          <el-button type="primary">选择Excel文件</el-button>
        </template>
        仅支持后缀名为.xls或.xlsx的文件
        <div class="fileTip">
          重要提示：
          <ul>
            <li>上传仅支持后缀名为.xls或.xlsx的文件；</li>
            <li>给定Excel文件的第一行将视为字段名；</li>
            <li>请确认您的文件大小不超过50MB；</li>
            <li>日期值以文本形式保存，必须符合yyyy-MM-dd格式；</li>
            <li>日期时间以文本形式保存，必须符合yyyy-MM-dd HH:mm:ss的格式；</li>
          </ul>
        </div>
        <div class="dialog-footer">
          <el-button @click="importDialogVisible = false">关 闭</el-button>
          <el-button type="primary" @click="submitExcel">导 入</el-button>
        </div>
      </el-upload>

    </el-dialog>
</template>

<style scoped>

</style>